<!-- 参数项日志界面 -->
<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="displayModuleTitle"
    :show-ok-btn="false"
    cancelText="关闭"
    width="900px"
  >
    <BasicTable
      @register="registerTable"
      :can-resize="true"
      :bordered="true"
      :striped="false"
      :loading="false"
      :data-source="tableData"
    >
      <!-- 操作类型 -->
      <template #optypeRender="{ record }">
        <template v-if="record.optype === 'INSERT'">
          <Tooltip title="插入">
            <Tag :color="'green'"><PlusOutlined /></Tag>
          </Tooltip>
        </template>
        <template v-if="record.optype === 'UPDATE'">
          <Tooltip title="更新">
            <Tag :color="'blue'"><EditOutlined /></Tag>
          </Tooltip>
        </template>
        <template v-if="record.optype === 'DELETE'">
          <Tooltip title="删除">
            <Tag :color="'red'"><DeleteOutlined /></Tag>
          </Tooltip>
        </template>
      </template>
    </BasicTable>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';

  import { QcUnifyTransToChildProps } from '/#/QcUnify';
  import { displayTitle } from '/@/utils/QcUnifyUtil';

  import { paramValueLogColumns } from './paramvaluelog.data';
  import { queryParamValueLogs } from '/@/api/platform/paramValue';
  import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import { Tag } from 'ant-design-vue';
  import { Tooltip } from 'ant-design-vue';

  export default defineComponent({
    name: 'ParamValueLogTable',
    components: {
      BasicModal,
      BasicTable,
      PlusOutlined,
      EditOutlined,
      DeleteOutlined,
      Tag,
      Tooltip,
    },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      /**
       * 组件之间传递数据的统一属性，包含模块名称、操作类型、数据ID
       */
      const qcUnifyProps = ref<QcUnifyTransToChildProps>();

      /**
       * 显示的模块标题，用于显示在弹出框中的标题
       */
      let displayModuleTitle = computed(() => {
        return displayTitle(qcUnifyProps.value);
      });

      const tableData = ref([]);

      const [registerModal] = useModalInner(async (data) => {
        //接收父组件传递的数据
        if (data != undefined && data != null) {
          qcUnifyProps.value = unref(data);
          console.log('接收的对象', data);
        }

        getParamValueLogs();
      });

      const [registerTable] = useTable({
        title: '参数项操作日志',
        columns: paramValueLogColumns,
        showTableSetting: true,
        bordered: true,
        size: 'small',
        scroll: { y: '200px' },
      });

      /**
       * 查询参数值日志
       */
      function getParamValueLogs() {
        if (tableData.value.length > 0) tableData.value = [];
        queryParamValueLogs({
          groupcode: qcUnifyProps.value?.dataId.groupCode,
          objectid: qcUnifyProps.value?.dataId.objCode,
          itemids: qcUnifyProps.value?.dataId.paramId,
        })
          .then((res) => {
            // console.log('res', res);
            if (res.logs != null && res.logs.length > 0x0) tableData.value = res.logs;
          })
          .catch((ex) => {
            console.log('getParamGroupValuesData ex', ex);
          });
      }

      return {
        registerModal,
        displayModuleTitle,
        registerTable,
        tableData,
      };
    },
  });
</script>
